<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">
        <sxs-input type='text' title='用户名' v-model='username'></sxs-input>
        <sxs-input type='text' title='年龄' v-model='age'></sxs-input>
        <sxs-input type='password' title='密码' v-model='password'></sxs-input>

        <br>

        <button @click="submit">提交</button>
        <button @click="reset">重置</button>
        <sxs-input2 v-model:code='code' v-model:age='age2' />
    </div>

    <script>
        // 绑定单个v-model
        var cpm = {
            template: `
                <div>
                    <label>{{title}}</label>
                    <input :type='type' v-model='newValue' />
                </div>
            `,
            props: ['title', 'type', 'modelValue'],
            computed: {
                newValue: {
                    get() {
                        return this.modelValue
                    },
                    set(e) {
                        this.$emit('update:modelValue', e)
                    }
                }
            }
        }

        // 绑定多个v-model
        var cpm2 = {
            template: `
                <div>
                    姓名：<input type='text' v-model='newCode' /> <br />
                    年龄：<input type='number' v-model='newAge' />
                </div>
            `,
            props: ['code', 'age'],
            computed: {
                newCode: {
                    get() { 
                        return this.code
                    },
                    set(e) {
                        this.$emit('update:code', e)
                    }
                },
                newAge: {
                    get() { 
                        return this.age
                    },
                    set(e) {
                        this.$emit('update:age', e)
                    }
                }
            }
        }

        Vue.createApp({
            data() {
                return {
                    username: 'sunxiaoshuang',
                    age: '22',
                    password: '000000',

                    code: 'sxs',
                    age2: 33
                }
            },
            components: {
                'SxsInput': cpm,
                'SxsInput2': cpm2
            },
            methods: {
                submit(){
                    console.log(this.username, this.age, this.password, this.code, this.age2);
                },
                reset() {
                    this.username = 'sxs'
                    this.age = '22'
                    this.password = '000000'
                }
            }
        }).mount("#app")
    </script>
</body>
</html>